<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>PrimeFaces</title>
            </f:facet>
            
            <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
            
        </h:head>

        <h:body>

            <h:form id="forma">
                <p:notificationBar id="bar" position="top" effect="slide" widgetVar="bar" styleClass="top">
                    <h:outputText value="What PrimeFaces has so far is just the beginning!" style="color:#FFCC00;font-size:36px;" />
                </p:notificationBar>

                <p:commandButton style="margin: 120px;" value="Show" onclick="$( PrimeFaces.escapeClientId('forma:bar') ).show()" type="button" />
                <p:commandButton style="margin: 120px;" value="Hide" onclick="$( PrimeFaces.escapeClientId('forma:bar') ).hide()" type="button" />
                
                <h3>Popup Button</h3>  
                <p:calendar value="#{calendarBean.date3}" id="popupButtonCal" showOn="button" />  
                
            </h:form>
            
            
            <p:growl id="growl" showDetail="true" />

    <p:dashboard id="board" model="#{dashboardBean.model}">
        <p:ajax event="reorder" listener="#{dashboardBean.handleReorder}" update="growl" />

        <p:panel id="sports" header="Sports">
            <h:outputText value="Sports Content" />
        </p:panel>

        <p:panel id="finance" header="Finance">
            <h:outputText value="Finance Content" />
        </p:panel>

        <p:panel id="lifestyle" header="Lifestyle">
            <h:outputText value="Lifestyle Content"  />
        </p:panel>

        <p:panel id="weather" header="Weather">
            <h:outputText value="Weather Content" />
        </p:panel>

        <p:panel id="politics" header="Politics">
            <h:outputText value="Politics Content" />
        </p:panel>
    </p:dashboard>
            
            
            <p:gmap center="44.777608, 17.194063" zoom="17" type="HYBRID" style="width:600px; height:400px" />
            

        </h:body>

    </f:view>
</html>

